import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Case, SwitchCase } from 'components/switch'
import { projectLabelView as projectDuck, canvas as canvasDuck } from 'ducks'
import { Rectangle, Polygon, Keypoint } from '../brushes'

const LabelsContainerView = ({
  scale,
  editLabelId,
  classes,
  labels,
  labelsId,
}) => {
  return (
    <Container>
      {
        labelsId.map((id) => {
          const label = labels[id]
          const classObj = classes[label.class_id]
          if (editLabelId !== label.id) {
            return (
              <SwitchCase key={label.id} switchValue={classObj.type}>
                <Case
                  value="rectangle"
                  render={() => (
                    <Rectangle
                      label={label}
                      color={classObj.color}
                      scale={scale}
                      active={false}
                    />
                  )}
                />
                <Case
                  value="polygon"
                  render={() => (
                    <Polygon
                      label={label}
                      color={classObj.color}
                      scale={scale}
                      active={false}
                    />
                  )}
                />
                <Case
                  value="keypoint"
                  render={() => (
                    <Keypoint
                      label={label}
                      color={classObj.color}
                      setting={classObj.setting}
                      scale={scale}
                      active={false}
                    />
                  )}
                />
              </SwitchCase>
            )
          }
          return null
        })
      }
    </Container>
  )
}

LabelsContainerView.propTypes = {
  scale: PropTypes.number.isRequired,
  editLabelId: PropTypes.string,
  classes: PropTypes.object.isRequired,
  labels: PropTypes.object,
  labelsId: PropTypes.arrayOf(PropTypes.string).isRequired,
}

LabelsContainerView.defaultProps = {
  editLabelId: undefined,
  labels: undefined,
}

const mapStateToProps = state => ({
  classes: projectDuck.selectors.classes(state),
  labelsId: projectDuck.selectors.labels(state),
  labels: projectDuck.selectors.labelsObject(state),
  editLabelId: projectDuck.selectors.editLabelId(state),
})

export default withPixiApp(connect(mapStateToProps)(LabelsContainerView))
